<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>博客管理界面</title>
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.3.1.min.js"></script>
<script src="bs/js/bootstrap.min.js"></script>
<style>
.container {
	margin-top: 30px;
	width: 1280px !important;
	max-width: none !important;
}

.row {
	margin-bottom: 15px;
}

.articletable {
	margin-top: 70px;
}
</style>
</head>
<body>
	<div class="container">
		<div>
			<h2>
				<small>Author:${sessionScope.ADMIN_IN_SESSION.username}</small>
			</h2>
		</div>
		<div align="right">
			<a href="/admin">注销登录</a>
		</div>
		<div class="btn-group btn-group-justified">
			<div class="btn-group">
				<a href="/checklogin"><button class="btn btn-danger">博客</button></a>
			</div>
			<div class="btn-group">
				<a href="/msg"><button class="btn btn-primary">留言板</button></a>
			</div>
			<div class="btn-group">
				<a href="/sharemusic"><button class="btn btn-warning">音乐分享</button></a>
			</div>
			<div class="btn-group">
				<a href="/sharemovie"><button class="btn btn-active">电影分享</button></a>
			</div>
			<div class="btn-group">
				<a href="/password"><button class="btn btn-success">密码修改</button></a>
			</div>
		</div>
		<div style="position: relative; top: 10%">
			<c:if test="${!empty isSuccess}">
				<div class="alert alert-warning" role="alert">${isSuccess}</div>
			</c:if>
		</div>
		<h2>音乐</h2>
		<table class="table table-striped table-bordered table-hover">
			<tr class="info">
				<th>id</th>
				<th>音乐名</th>
				<th>描述</th>
				<th>位置</th>
				<th>Operator</th>
			</tr>
			<c:forEach var="mus" items="${music}" varStatus="vs">
				<tr style='color: orange'>
					<td>${mus.id}</td>
					<td>${mus.name}</a></td>
					<td>${mus.descript }</td>
					<td>${mus.realPath }</td>
					<td><a
						href="/mucDelete?id=${mus.id}&name=${mus.realPath}">删除</a></td>
				</tr>
			</c:forEach>
		</table>
		<nav aria-label="Page navigation">
			<ul class="pagination" style="margin-top: 0px">
				<!--把后台传来的 查询条件 取出来 拼在后面-->
				<li><a href="/sharemusic?page=${pageInfo.prePage }"
					aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
				</a></li>
				<c:forEach begin="1" step="1" end="${pageInfo.pages }" var="i">
					<li class="${i eq pageInfo.pageNum ? 'active':''}"><a
						href="/sharemusic?page=${i }">${i }</a></li>
				</c:forEach>
				<li><a href="/sharemusic?page=${pageInfo.nextPage}"
					aria-label="Next"> <span aria-hidden="true">&raquo;</span>
				</a></li>
			</ul>
			<div
				style="font-weight: 700; font-family: cursive; margin-left: 93%; margin-top: -50px"
				class="text-warning">Total：${pageInfo.total }</div>
		</nav>
		<!--  -->
		<button type="button" class="btn btn-primary" data-toggle="modal"
			data-target="#exampleModal" style="margin-left: 93%;margin-top: 10px">添加音乐</button>
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
			aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">New music</h4>
					</div>
					<div class="modal-body">
						<form action="/addMusic" method="post"
							enctype="multipart/form-data">
							<!--这里是个上传控件getParamer获不到里面的数据-->
							<input type="hidden" name="tokenInForm" value="${tokenInForm}">
							<div class="form-group">
								<label for="">音乐名</label> <input type="text"
									class="form-control" name="name" required="required">
							</div>
							<div class="form-group">
								<label for="">音乐描述</label> <input type="text"
									class="form-control" name="desc" required="required">
							</div>
							<div class="form-group" id="">
								<label for="">音乐</label> <input type="file" required="required"
									name="music">
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">Close</button>
								<button type="submit" class="btn btn-primary">OK</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!--  -->
	</div>
</body>
</html>